import { Button, Dialog, Modal, Toast } from 'antd-mobile'
import React, { useCallback } from 'react'
import style from './index.less'

import { PhoneFill } from 'antd-mobile-icons'
import { useEffect } from 'react'
export type SupplyOrderDto = {
    id?: string,
    negotiationState: string
}
type Props = {
    data: SupplyOrderDto;
    callback: () => void;
};
export type DataDto = {
    id:string,
    name:string,
    mobile:string,
}

export default (props: Props) => {
    const [detailData, setDetailData] = React.useState<DataDto>([]);
    const [visible, setVisible] = React.useState<boolean>(false);
    const { data, callback } = props;
    const data1 = 
        {
            id:'1',
            name:'sss',
            mobile:'142222222222'
        }
    
    useEffect(()=>{
        setDetailData(data1)
    },[])
    return (
        <div>
            <div className={style.btns}>
                <Button
                    className={style.btn}
                    size="small"
                    onClick={async () => {
                        // const $data = await request
                        //     .data({})
                        //     .post('/biz/shopping/purchaseOrder/getSellerContact', {
                        //         id: data.id,
                        //     });
                        setVisible(true);
                        // setDetailData($data);
                    }
                    }
                >
                    联系商家
                </Button>
                <Button
                    className={style.btn}
                    color='success'
                    fill='outline'
                    size="small"
                >
                    去开票
                </Button>
            </div>
            <Modal
                showCloseButton={true}
                visible={visible}
                onClose={() => {
                    setVisible(false);
                }}
                title="联系方式"
                className={style.modal2}
                content={(
                    <div className={style['info-warp']}>
                    <div className={style.line2}>
                        <div className={style.info}>
                            <div className={style.tip}>以下是商家的联系方式，请电话联系</div>
                            <div className={style.phone}>
                                <span>
                                    {detailData.name ? `${detailData.name} ` : ''}
                                    {detailData.mobile}
                                </span>
                            </div>
                        </div>
                        <div
                            className={style.icon}
                            onClick={() => {
                                window.location.href = `tel:${detailData.mobile}`;
                            }}
                        >
                            <div>
                                <PhoneFill style={{ marginLeft: '5px' }} />
                            </div>
                            呼叫
                        </div>
                    </div>
                </div>
                )}
            >
            </Modal>
        </div>
    )
}
